<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>明星列表</title>
    <link rel="stylesheet" href="/css/common.css"> <!-- 引入通用CSS -->

    <style>
        input[type="text"] {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            padding: 8px 16px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>
<div>
    <h1>明星列表</h1>
    <!-- 添加三个输入框，分别用于输入姓名、国籍和分类 -->
    <input type="text" id="nameInput" placeholder="按姓名搜索" class="mb-4">
    <input type="text" id="nationalityInput" placeholder="按国籍搜索" class="mb-4">
    <input type="text" id="categoryInput" placeholder="按分类搜索" class="mb-4">
    <button onclick="searchStars()" class="ml-2">搜索</button>
    <table>
        <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>出生日期</th>
            <th>出生地点</th>
            <th>国籍</th>
            <th>演艺经历</th>
            <th>代表作品</th>
            <th>分类</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="starTableBody">
        <tr th:each="star : ${stars}">
            <td th:text="${star.name}"></td>
            <td th:text="${star.age}"></td>
            <td th:text="${star.birthDate}"></td>
            <td th:text="${star.birthPlace}"></td>
            <td th:text="${star.nationality}"></td>
            <td th:text="${star.actingExperience}"></td>
            <td th:text="${star.representativeWorks}"></td>
            <td th:text="${star.profession}"></td>
            <td>
                <form th:action="@{/stars/{id}(id=${star.id})}" method="post">
                    <input type="hidden" name="_method" value="DELETE">
                    <input type="submit" value="删除">
                </form>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="pagination">
        <!-- 首页 -->
        <a th:if="${currentPage > 1}" th:href="@{/star - list(page = 1, size = 8)}" data - page="1">首页</a>
        <!-- 上一页 -->
        <a th:if="${currentPage > 1}" th:href="@{/star - list(page = ${currentPage - 1}, size = 8)}"
           th:data - page="${currentPage - 1}">上一页</a>
        <!-- 页码列表 -->
        <span th:each="i : ${#numbers.sequence(
            (currentPage - 2 > 0)? currentPage - 2 : 1,
            (currentPage + 2 < totalPages)? currentPage + 2 : totalPages)}"
              th:class="${i == currentPage}? 'active' : ''" th:text="${i}">
                <a th:href="@{/follow - list(page = ${i}, size = 8)}" th:data - page="${i}"></a>
            </span>
        <!-- 下一页 -->
        <a th:if="${currentPage < totalPages}" th:href="@{/star - list(page = ${currentPage + 1}, size = 8)}"
           th:data - page="${currentPage + 1}">下一页</a>
        <!-- 尾页 -->
        <a th:if="${currentPage < totalPages}" th:href="@{/star - list(page = ${totalPages}, size = 8)}"
           th:data - page="${totalPages}">尾页</a>
    </div>
    <div th:if="${message}" class="message" th:text="${message}"></div>
    <div th:if="${error}" class="error" th:text="${error}"></div>
    <script>
        function searchStars() {
            // 获取三个输入框的值，并转换为大写
            const nameFilter = document.getElementById('nameInput').value.toUpperCase();
            const nationalityFilter = document.getElementById('nationalityInput').value.toUpperCase();
            const categoryFilter = document.getElementById('categoryInput').value.toUpperCase();

            const table = document.getElementById('starTableBody');
            const rows = table.getElementsByTagName('tr');

            for (let i = 0; i < rows.length; i++) {
                const cells = rows[i].getElementsByTagName('td');
                // 获取当前行的姓名、国籍和分类单元格的文本内容
                const name = cells[0].textContent || cells[0].innerText;
                const nationality = cells[4].textContent || cells[4].innerText;
                const category = cells[7].textContent || cells[7].innerText;

                // 判断当前行是否满足搜索条件
                const nameMatch = nameFilter === '' || name.toUpperCase().indexOf(nameFilter) > -1;
                const nationalityMatch = nationalityFilter === '' || nationality.toUpperCase().indexOf(nationalityFilter) > -1;
                const categoryMatch = categoryFilter === '' || category.toUpperCase().indexOf(categoryFilter) > -1;

                // 如果当前行满足所有搜索条件，则显示该行，否则隐藏该行
                if (nameMatch && nationalityMatch && categoryMatch) {
                    rows[i].style.display = '';
                } else {
                    rows[i].style.display = 'none';
                }
            }
        }
    </script>
</div>
</body>

</html>